<template>
  <view class="feedback-page">
    <view class="form-container">
      <view class="form-item">
        <text class="form-label">反馈类型:</text>
        <picker
          :range="feedbackTypes"
          :value="selectedTypeIndex"
          @change="onTypeChange"
          class="picker"
        >
          <view class="picker-text">
            {{ feedbackTypes[selectedTypeIndex] || '请选择反馈类型' }}
          </view>
        </picker>
      </view>

      <view class="form-item">
        <text class="form-label">反馈内容:</text>
        <textarea
          v-model="feedbackContent"
          placeholder="请输入您的反馈内容"
          class="input-field"
          rows="5"
          maxlength="500"
        ></textarea>
        <text class="char-count">{{ feedbackContent.length }}/500</text>
      </view>

      <view class="form-item">
        <text class="form-label">联系方式 (可选):</text>
        <input
          v-model="contactInfo"
          type="text"
          placeholder="请输入您的联系方式"
          class="input-field"
        />
      </view>

      <button @click="submitFeedback" class="btn-submit">提交反馈</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 反馈类型选项
const feedbackTypes = ['功能建议', 'BUG反馈', '其他问题'];
const selectedTypeIndex = ref<number>(0);

// 反馈内容
const feedbackContent = ref<string>('');
const contactInfo = ref<string>('');

// 选择反馈类型
const onTypeChange = (event: any) => {
  selectedTypeIndex.value = event.detail.value;
};

// 提交反馈
const submitFeedback = () => {
  if (!feedbackContent.value.trim()) {
    showToast('反馈内容不能为空');
    return;
  }

  const feedbackData = {
    type: feedbackTypes[selectedTypeIndex.value],
    content: feedbackContent.value,
    contact: contactInfo.value,
  };

  console.log('提交的反馈数据:', feedbackData);
  showToast('反馈提交成功');
  resetForm();
};

// 重置表单
const resetForm = () => {
  feedbackContent.value = '';
  contactInfo.value = '';
  selectedTypeIndex.value = 0;
};
// 表单提交按钮的点击事件处理函数
const showToast = (msg:string)=>{
      uni.showToast({
          title: msg,
          icon: 'none',
          duration: 2000
      });
}
</script>

<style scoped>
.feedback-page {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.form-container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  display: block;
}

.picker {
  width: 100%;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
}

.picker-text {
  color: #333;
}

.input-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.input-field:focus {
  border-color: #6a11cb;
  outline: none;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.btn-submit {
  width: 100%;
  padding: 12px;
  background-color: #6a11cb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-submit:hover {
  background-color: #2575fc;
}
</style>